<template>
    <div class="mask" 
    v-if="showMask"
     @touchmove="changeMove" @scroll="scroll">
        <!--<mt-spinner v-show="isShow" type="fading-circle"></mt-spinner>-->
        <div ref="optCont" class="container">
            <ul  class="li-cont">
                <li v-for="(item,index) in maskList" 
                :optionItem="item"
                 @click.stop="handleClick(index,item.descr)" 
                :key="item.deptid" 
                :class='{"checked":index === checked}'
                >
                    {{item.descr}}
                </li>
            </ul>
        </div>

    </div>
</template>
<script>
import Vue from "vue";
import { Spinner } from "mint-ui";
Vue.component(Spinner.name, Spinner);
export default {
  data() {
    return {
      value: '',
      showMask: false,
      scrollTop: 0,
      maskList:'',
      checked:0
    }
  },

  watch: {
    showMask: function(newVal) {
      if (newVal) {
        var self = this;
        Vue.nextTick(function() {
          self.$refs.optCont.scrollTop = self.scrollTop;
        });
      }
    }
  },

  mounted() {
    Bus.$on('maskList',data => this.maskList = data)
    Bus.$on('showMask',data => this.showMask = data)
  },
  methods: {
    changeMove: function(e) {
      e.stopPropagation();
    },
    scroll: function() {},
    handleClick(index, name) {
      setTimeout(() => {
        this.checked = index
        this.showMask = false;
        Bus.$emit('maskLabel',name)
        
      }, 100);
      this.scrollTop = this.$refs.optCont.scrollTop;
    }
  }
}
</script>
<style scoped>
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.mask .container {
  background-color: #fff;
  height: 8rem;
  width: 6rem;
  /*overflow: hidden;*/
  /*overflow-y:auto;*/
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: 0.3rem;
}
.mask .container::-webkit-scrollbar {
  display: none;
}
.mask .li-cont {
  width: 80%;
  margin: auto;
  /* font-weight: 600; */
  font-size: 0.32rem;
  line-height: 3;
  margin-top: 0.5rem;
}
.mask .checked {
  color: #26a2ff;
}
</style>

             
             
             
             
